<template>
  <div class="part" >
    <div class="box" ref="boxRef"></div>
    <div v-if="isNull">
      <span>该门考试没人参考,请提醒学生参加考试。</span>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router/dist/vue-router";

export default {
  name: "scorePart",
  setup(){
    const route = useRoute()
    const {proxy} = getCurrentInstance()
    let boxRef = ref(null)
    let isNull = ref(false)
    let subject = ref(null)
    let category = reactive({//保存分数段
      '90分及以上': 0,
      '80-89分': 0,
      '70-79分': 0,
      '60-69分': 0,
      '60分以下': 0,
    })
    onMounted(()=>{
      setTimeout(()=>{
        getScoreInfo()
      },800)
    })
    function getScoreInfo(){
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/manage/score/exam/${route.query.id}`
      ).then(
          response => {
            console.log(response.data)
            if (response.data.length === 0){
              isNull.value = true
            }else {
              subject.value = response.data[0].subject
              response.data.forEach((item)=>{
                switch(item.score / 10) {
                  case 10:
                  case 9:
                    category["90分及以上"]++
                    break
                  case 8:
                    category['80-89分']++
                    break
                  case 7:
                    category["70-79分"]++
                    break
                  case 6:
                    category['60-69分']++
                    break
                  default:
                    category['60分以下']++
                }
              })
              let scoreCharts = proxy.$echarts.init(proxy.$refs.boxRef);
              let option = {
                title : {
                  text: `${subject.value}分数段图`,
                  subtext: '分数段饼图',
                  x:'center'
                },
                tooltip : {
                  trigger: 'item',
                  formatter: "{a}：{b} <br/> {c}人 ({d}%)"
                },
                legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ['90分及以上','80-89分','70-79分','60-69分','60分以下']
                },
                series : [
                  {
                    name: '分数段',
                    type: 'pie',
                    radius : '35%',
                    center: ['50%', '35%'],
                    data:[
                      {value: category['90分及以上'], name:'90分及以上'},
                      {value: category['80-89分'], name:'80-89分'},
                      {value: category['70-79分'], name:'70-79分'},
                      {value: category['60-69分'], name:'60-69分'},
                      {value: category['60分以下'], name:'60分以下'}
                    ],
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              };
              scoreCharts.setOption(option)
            }
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    return{
      isNull,
      boxRef
    }
  }
}
</script>

<style scoped>
.part .box {
  width: 800px;
  height: 800px;
  margin-left: 40px;
}
</style>